<style>
.el-carousel__item img {
    width: 100%;
    height: 462px;
}
</style>

<style scoped lang='scss'>
.custom-case-wrapper {
    width: 100%;
    // height: 580px;
    padding: 80px 0;
    background-image: url('../assets/custom/Caseback-ground.png');
    background-repeat: no-repeat;
    .title {
        width: 360px;
        height: 40px;
        font-size: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(13, 26, 38, 1);
        line-height: 40px;
        margin: 0 auto 80px;
    }
    .case-list {
        display: flex;
        align-content: center;
        justify-content: center;
        li {
            width: 224px;
            height: 300px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            margin-left: 20px;
            .case-img {
                width: 60px;
                height: 60px;
                // background: rgba(245, 166, 36, 1);
                margin: 50px auto 0;
            }
            .case-name {
                width: 100px;
                height: 20px;
                font-size: 20px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(13, 26, 38, 1);
                line-height: 20px;
                margin: 50px auto 20px;
            }
            .case-content {
                width: 191px;
                height: 48px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                line-height: 24px;
                margin: 0 auto;
            }
        }
    }
}
</style>

<template>
    <div class="wrapper">
        <div class="banner-group" id="banner-group">
            <el-carousel trigger="click" height="462px">
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523504442_455.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1522742329_629.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1525669927_166.jpg" alt="">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="custom-case-wrapper">
            <p class="title">行业定制化解决方案</p>
            <ul class="case-list">
                <li>
                    <div class="case-img"><img src="../assets/custom/物联网建设.png" alt=""></div>
                    <div class="case-name">物联网建设</div>
                    <div class="case-content">互联网+时代，为客户提供最全面的物联网建设</div>
                </li>
                <li>
                    <div class="case-img"><img src="../assets/custom/网站建设.png" alt=""></div>
                    <div class="case-name">网站建设</div>
                    <div class="case-content">互联网+时代，为客户提供最全面的物联网建设</div>
                </li>
                <li>
                    <div class="case-img"><img src="../assets/custom/小程序开发.png" alt=""></div>
                    <div class="case-name">小程序开发</div>
                    <div class="case-content">互联网+时代，为客户提供最全面的物联网建设</div>
                </li>
                <li>
                    <div class="case-img"><img src="../assets/custom/公众号开发.png" alt=""></div>
                    <div class="case-name">公众号开发</div>
                    <div class="case-content">互联网+时代，为客户提供最全面的物联网建设</div>
                </li>
                <li>
                    <div class="case-img"><img src="../assets/custom/app开发.png" alt=""></div>
                    <div class="case-name">App开发</div>
                    <div class="case-content">互联网+时代，为客户提供最全面的物联网建设</div>
                </li>
            </ul>
        </div>
        <cor></cor>
    </div>
</template>

<script type="text/ecmascript-6">
import { Carousel, CarouselItem } from "element-ui"
import Cor from "../components/Cor"
export default {
    name: "Index",
    data() {
        return {}
    },
    components: {
        [Carousel.name]: Carousel,
        [CarouselItem.name]: CarouselItem,
        [Cor.name]: Cor
    }
}
</script>

